<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<title>#{lang['web.title.trangchu']}</title>
	<script>
		$(document).ready(function(){
			$('#nav-trangchu').addClass('active');
		});
	</script>
</h:head>
<body>
	<ui:include src="../include/slide-index.xhtml"></ui:include>
	<div class="container">
		<div class="row">
			<ul class="list-inline location-page">
				<li><a href="/#{lang['web.url']}/trang-chu/" title="#{lang['web.title.trangchu']}">#{lang['web.title.trangchu']}</a></li>
			</ul>
		</div>
	</div>

	<!-- NGHỀ NGHIỆP DÀNH CHO BẠN -->
	<div class="container">
		<div class="row">
			<div class="title-row col-md-3 clear-both">#{lang['web.title.nghenghiepdanhchoban']}</div>
		</div>
		<div class="row">
			<ui:repeat var="n300" value="#{indexBean.listN300}">
				<div class="col-md-3 col-sm-6 col-xs-12 job-col">
					<img alt="" src="/#{lang['web.nameproject']}#{n300.hinhanh}" />
					<h3>
						<a href="/#{lang['web.url']}/#{n300.url}/#{n300.idtheloai}/#{n300.md5baiviet}/" title="#{n300.tieude}">#{n300.tieude}</a>
					</h3>
					<p>#{n300.tomtat}</p>
					<div class="view-more">
						<a href="/#{lang['web.url']}/#{n300.url}/#{n300.idtheloai}/#{n300.md5baiviet}/" title="#{lang['web.title.xemthem']}">#{lang['web.title.xemthem']}</a>
					</div>
				</div>
			</ui:repeat>
		</div>
		<div class="row">
			<div class="col-md-12 cls-div-end"></div>
		</div>
	</div>

	<!-- TIN TỨC NỔI BẬT -->
	<div class="container">
		<div class="row">
		
			<div class=" hidden-md visible-sm visible-xs col-sm-12 col-xs-12 job-col">
				<div class="title-row title-row-child">#{lang['web.title.tintucnoibat']}</div>
			</div>
			<h:panelGroup rendered="#{not empty indexBean.news_feature.md5baiviet}">
				<div class="col-md-6 col-sm-12 col-xs-12 job-col">
					<img alt="" src="/#{lang['web.nameproject']}#{indexBean.news_feature.hinhanh}" style="max-height: 270px;" />
					<h3>
						<a href="/#{lang['web.url']}/#{indexBean.news_feature.url}/#{indexBean.news_feature.urltheloai}/#{indexBean.news_feature.md5baiviet}/">#{indexBean.news_feature.tieude}</a>
					</h3>
					<p>#{indexBean.news_feature.tomtat}</p>
					<div class="view-more">
						<a href="/#{lang['web.url']}/#{indexBean.news_feature.url}/#{indexBean.news_feature.md5baiviet}/" title="#{lang['web.title.xemthem']}">#{lang['web.title.xemthem']}</a>
					</div>
				</div>
			</h:panelGroup>
			
			<div class="col-md-3 col-sm-12 col-xs-12 padding-bottom-10">
				<div class="hidden-sm hidden-xs title-row title-row-child">#{lang['web.title.tintucnoibat']}</div>
				<ui:repeat var="n300_news" value="#{indexBean.listN300_news}">
					<div class="news-feature">
						<img alt="" src="/#{lang['web.nameproject']}#{n300_news.hinhanh}" />
						<div class="news-feature-content">
							<h4>
								<a href="/#{lang['web.url']}/#{n300_news.url}/#{n300_news.urltheloai}/#{n300_news.md5baiviet}/" title="#{n300_news.tieude}"> #{n300_news.tieude}</a>
							</h4>
							<p class="title-date">
								<h:outputText value="#{n300_news.tgtao}"><f:convertDateTime pattern="dd/MM/yyyy hh:mm:ss" ></f:convertDateTime> </h:outputText>
							</p>
						</div>
					</div>
				</ui:repeat>
			</div>

			<!-- HỎI ĐÁP -->
			<div class="col-md-3 col-sm-12 col-xs-12 padding-bottom-10">
				<div class="hidden-md visible-sm visible-xs row cls-div-end"></div>
				<div class="title-row title-row-child">#{lang['web.title.hoidap']}</div>
				
				<ui:repeat var="n300_question" value="#{indexBean.listN300_question}">
					<div class="news-question">
						<h4>
							<a href="/#{lang['web.url']}/#{n300_question.url}/#{n300_question.urltheloai}/#{n300_question.md5baiviet}/" title="#{n300_question.tieude}">#{n300_question.tieude}</a>
						</h4>
						<p class="title-date">
							<h:outputText value="#{n300_question.tgtao}"><f:convertDateTime pattern="dd/MM/yyyy hh:mm:ss" ></f:convertDateTime> </h:outputText> 
						</p>
					</div>
				</ui:repeat>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12  cls-div-end"></div>
		</div>
	</div>
	<!-- END HOI DAP -->
	
	<!-- VIDEO -->
	<div class="container" style="margin-bottom: 20px;">
		<div class="row">
			<div class="title-row col-md-3 clear-both">#{lang['web.title.video']}</div>
		</div>
		<div class="row">
			<ui:repeat var="video" value="#{indexBean.listN500}">
				<div class="col-md-3 col-sm-6 col-xs-12 video-col">
					<a href="/#{lang['web.url']}/video/#{video.md5video}/">
						<div class="img-video">
							<img src="/#{lang['web.nameproject']}#{video.hinhanh}"/>
							<div class="img-video-play"></div>
						</div>
						<h4>#{video.tenvideo}</h4>
					</a>
				</div>
			</ui:repeat>
		</div>
	</div>
</body>
</html>